<template>
  <template v-if="route.children && route.children?.length > 0">
    <a-sub-menu :key="route.path" :title="route.title || route.meta?.title">
      <template v-if="route.meta?.icon || route.meta?.img" #icon>
        <icon-arco :size="route.meta?.img ? 20 : 16" :type="route.meta?.icon" :src="route.meta?.img" />
      </template>
      <template v-for="child of route.children" :key="child.path">
        <sider-menu-item :route="child" />
      </template>
    </a-sub-menu>
  </template>
  <template v-else>
    <a-menu-item :key="route.path" @click="gotoRouter(route)">
      <template v-if="route.meta?.icon || route.meta?.img" #icon>
        <icon-arco :size="route.meta?.img ? 20 : 16" :type="route.meta?.icon" :src="route.meta?.img" />
      </template>
      <span>{{ route.title || route.meta?.title }}</span>
    </a-menu-item>
  </template>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { openWindows } from '@/utils/tools'

defineProps({
  route: {
    type: Object,
    default: () => {}
  }
})

// 点击菜单
const $router = useRouter()
const gotoRouter = ({ path, linkSrc }) => {
  if (linkSrc && /^(https?:|mailto:|tel:|\/\/)/.test(linkSrc)) {
    openWindows(linkSrc)
  } else {
    $router.push({ path })
  }
}
</script>
